<template>
  <div>
    <a href="../search/main">
      <div class="searchTopBar">
        <div class="indexSearch">
          <i class="iconfont icon-sousuo"></i> 热门搜索商品
        </div>
      </div>
    </a>
    <div class="searchLeftTab">
      <ul>
        <li v-for="(item,index) in categoryData" :key="index" :class="{'active':activeIndex == index}"
            @click="tabClick(item,index)">{{item.name}}
        </li>
      </ul>
    </div>

    <div v-for="(item,index) in categoryData" :key="index">
      <div v-if="item.name=='品牌'" class="searchRight" :hidden="currentCateItem.name != item.name">
        <brandList></brandList>
      </div>
      <div v-else-if="item.name=='价格'" class="searchRight" :hidden="currentCateItem.name != item.name">
        <price :price="item.children[0]" :discount="item.children[1]"></price>
      </div>
      <div v-else-if="item.name=='女士'" class="searchRight" :hidden="currentCateItem.name != item.name">
        <categoryItem :classifyData="item" :conditionType="1"></categoryItem>
      </div>
      <div v-else-if="item.name=='男士'" class="searchRight" :hidden="currentCateItem.name != item.name">
        <categoryItem :classifyData="item" :conditionType="2"></categoryItem>
      </div>
      <div v-else class="searchRight" :hidden="currentCateItem.name != item.name">
        <categoryItem :classifyData="item"></categoryItem>
      </div>
    </div>


    <div class="posiBottomBtn">
      <div class="BottomBtn" @click="clearAll">清空</div>
      <div class="BottomBtn" @click="handelUrl">筛选（{{totalCount}}）</div>
    </div>
    <placeholder :show.sync="errorPage" :message.sync="errorMsg" :hidden.sync="hidden" @tryAgain="onEmpty"/>
  </div>
</template>
<script>
  import {mapState, mapMutations, mapActions} from "vuex";
  import categoryItem from "@/components/category-item";
  import placeholder from "@/components/placeholder";
  import brandList from "@/components/brand-list";
  import price from "@/components/price";
  import Arrayutils from "@/utils/arrayutils";
  import {brandAction, cateAction} from "@/store/funnames";
  import mock from "@/mock/MockApi";

  export default {
    data() {
      return {
        activeIndex: 0,
        errorPage: false,
        hidden: false,
        errorMsg: ""
      };
    },
    computed: {
      ...mapState('cate', ['totalCount', 'categoryData', 'currentCateItem'])
    },
    components: {
      categoryItem,
      brandList,
      price,
      placeholder
    },
    methods: {
      ...mapMutations("brand", {
        updateBrandData: brandAction.ACTION_CONDITION_BRAND_UPDATE,
      }),
      ...mapMutations("cate", {
        clearAllCondition: cateAction.ACTION_CLEAR_ALL,
        setCate: cateAction.ACTION_SET_CATE,
        setCateItem: cateAction.ACTION_SET_CATE_ITEM
      }),
      ...mapActions("cate", ['getGoodsCount']),
      onEmpty() {
        this.getCateList();
      },
      tabClick(item, index) {
        this.activeIndex = index;
        this.setCateItem(item)
      },
      clearAll() {
        this.clearAllCondition()
        this.getGoodsCount({})
        this.$root.$eventHub.$emit('requestGoods', true)
      },
      handelUrl() {
        this.$wx.back(1);
      },
      async getCateList() {
        if (!this.$wx.isArrayEmpty(this.categoryData)) {
          this.activeIndex = Arrayutils.findIndex(this.categoryData, this.currentCateItem)
          if (this.activeIndex == -1){
            this.activeIndex = 0
          }
          return
        }
        this.activeIndex = 0
        let resData = await this.$fly.post(this.$url.URL_MINI_PRODUCT_FILTERS)
        if (resData.successCode) {
          if (resData.data == null) {
            this.errorPage = true;
            this.hidden = true;
            this.errorMsg = "数据获取异常";
            return;
          }
          this.errorPage = false;
          this.setCate(resData.data)
          this.setCateItem(this.categoryData[0])
          if (this.currentCateItem.name == "品牌") {
            this.updateBrandData(this.currentCateItem);
          }
          this.getGoodsCount({})
        } else {
          this.errorPage = true;
          this.hidden = false;
          this.errorMsg = resData.message;
        }
      }
    },
    onLoad() {
      this.$wx.setTitleBarTitle("筛选");
    },
    mounted() {
      this.getCateList();
    }
  };
</script>

<style scoped>
</style>
